<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>效果 - UIkit 中文文档</title>
        <meta name="description" content="UIkit的效果组件包含一些实用的效果类集合，它们可以用来风格化你的网页内容。">
        <meta name="author" content="UIkit中文网">
         
<meta name="keywords" content="UIKit效果组件,网页效果,浮动与清除浮动,新的块级格式化范围,对齐方式,响应式对象,外边距,Margin,滚动框,响应式可见性,Utility">
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
        <link id="data-uikit-theme" rel="stylesheet" href="css/uikit.docs.min.css">
        <link rel="stylesheet" href="css/docs.css">
        <link rel="stylesheet" href="../vendor/highlight/highlight.css">
        <script src="../vendor/jquery.js"></script>
        <script src="js/uikit.min.js"></script>
        <script src="../vendor/highlight/highlight.js"></script>
        <script src="js/docs.js"></script>
    </head>

    <body class="tm-background">

        <nav class="tm-navbar uk-navbar uk-navbar-attached">
            <div class="uk-container uk-container-center">

                <a class="uk-navbar-brand uk-hidden-small" href="../index.html"><img class="uk-margin uk-margin-remove" src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>

                <ul class="uk-navbar-nav uk-hidden-small">
                    <li><a href="documentation_get-started.html">开始使用</a></li>
                    <li class="uk-active"><a href="core.html">核心组件</a></li>
                    <li><a href="components.html">附加组件</a></li>
                    <li><a href="customizer.html">定制工具</a></li>
                    <li><a href="../showcase/index.html">案例展示</a></li>
                    <li><a href="tutorials.html">视频教程</a></li>
                </ul>

                <a href="#tm-offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

                <div class="uk-navbar-brand uk-navbar-center uk-visible-small"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></div>

            </div>
        </nav>

        <div class="tm-middle">
            <div class="uk-container uk-container-center">

                <div class="uk-grid" data-uk-grid-margin>
                    <div class="tm-sidebar uk-width-medium-1-4 uk-hidden-small">

                        <ul class="tm-nav uk-nav" data-uk-nav>

                            <li class="uk-nav-header">默认</li>
                            <li><a href="base.html">基础</a></li>
                            <li><a href="print.html">打印</a></li>

                            <li class="uk-nav-header">布局类组件</li>
                            <li><a href="grid.html">网格</a></li>
                            <li><a href="panel.html">面板</a></li>
                            <li><a href="block.html">块</a></li>
                            <li><a href="article.html">文章</a></li>
                            <li><a href="comment.html">评论</a></li>
                            <li class="uk-active"><a href="utility.html">效果</a></li>
                            <li><a href="flex.html">Flex</a></li>
                            <li><a href="cover.html">覆盖</a></li>

                            <li class="uk-nav-header">导航类组件</li>
                            <li><a href="nav.html">导航菜单</a></li>
                            <li><a href="navbar.html">导航栏</a></li>
                            <li><a href="subnav.html">二级导航</a></li>
                            <li><a href="breadcrumb.html">面包屑</a></li>
                            <li><a href="pagination.html">分页</a></li>
                            <li><a href="tab.html">选项卡</a></li>
                            <li><a href="thumbnav.html">缩略图导航</a></li>

                            <li class="uk-nav-header">页面元素</li>
                            <li><a href="list.html">列表</a></li>
                            <li><a href="description-list.html">描述列表</a></li>
                            <li><a href="table.html">表格</a></li>
                            <li><a href="form.html">表单</a></li>

                            <li class="uk-nav-header">常用组件</li>
                            <li><a href="button.html">按钮</a></li>
                            <li><a href="icon.html">图标</a></li>
                            <li><a href="close.html">关闭</a></li>
                            <li><a href="badge.html">徽章</a></li>
                            <li><a href="alert.html">提示框</a></li>
                            <li><a href="thumbnail.html">缩略图</a></li>
                            <li><a href="overlay.html">遮罩</a></li>
                            <li><a href="text.html">文本</a></li>
                            <li><a href="column.html">列</a></li>
                            <li><a href="animation.html">动画</a></li>
                            <li><a href="contrast.html">对比度</a></li>

                            <li class="uk-nav-header">JavaScript组件</li>
                            <li><a href="dropdown.html">下拉菜单</a></li>
                            <li><a href="modal.html">模态对话框</a></li>
                            <li><a href="offcanvas.html">抽屉</a></li>
                            <li><a href="switcher.html">切换器</a></li>
                            <li><a href="toggle.html">拨动器</a></li>
                            <li><a href="scrollspy.html">滚动监听</a></li>
                            <li><a href="smooth-scroll.html">平滑滚动</a></li>

                        </ul>

                    </div>
                    <div class="tm-main uk-width-medium-3-4">

                        <article class="uk-article">

                            <h1 class="uk-article-title">效果/Utility</h1>

                            <p class="uk-article-lead">一些实用的效果类集合，它们可以用来风格化你的网页内容。</p>

                          <h2 id="container"><a href="#container" class="uk-link-reset">容器</a></h2>

                          <p>添加 <code>.uk-container</code> 类到一个块元素中，为其设置一个最大宽度并将网页的主要内容包装在其中。对于大屏幕采用不同的最大宽度。</p>
                          <hr class="uk-article-divider">
                            <h3>居中</h3>

                            <p>想要将容器居中，使用 <code>.uk-container-center</code> 类。对于其它的块元素，你需要设定一个宽度。</p>

                            <h4 class="tm-article-subtitle">示例</h4>

                            <div class="uk-width-medium-1-2 uk-container-center">
                                <div class="uk-panel uk-panel-box uk-panel-box-primary">Centered block element</div>
                            </div>

                            <h4 class="tm-article-subtitle">Code</h4>

                            <pre><code>&lt;div class="uk-width-medium-1-2 uk-container-center"&gt;...&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="clearing-and-floating"><a href="#clearing-and-floating" class="uk-link-reset">浮动与清除浮动</a></h2>

                            <p>浮动是创建各式布局的基础。但浮动需要清除，否则在最坏的情况下需，你会得到一个杂乱无章的页面。下面的类能帮助你创建基础的布局。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>Class</th>
                                            <th>概述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.uk-float-left</code></td>
                                            <td>浮动元素为左对齐。 </td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-float-right</code></td>
                                            <td>浮动元素为右对齐。 </td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-clearfix</code></td>
                                            <td>向父容器添加这个类来清除浮动。 </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <h3 class="tm-article-subtitle">Code</h3>

<pre><code>&lt;div class="uk-clearfix"&gt;
    &lt;div class="uk-float-right"&gt;...&lt;/div&gt;
    &lt;div class="uk-float-left"&gt;...&lt;/div&gt;
&lt;/div&gt;</code></pre>

                            <h3>单独的用来格式化上下文的块元素/New block formatting context</h3>

                            <p>代替使用 <code>.uk-clearfix</code> 类，你可以单独创建一个块元素来清除上下文的浮动。基于你的设置，你可以对其进行评估哪种方式更加适合。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>Class</th>
                                            <th>概述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.uk-nbfc</code></td>
                                            <td>设置 overflow 为 hidden 来创建一个单独的用来格式化上下文的块元素。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-nbfc-alt</code></td>
                                            <td>设置 display 为 table-cell 来创建一个单独的用来格式化上下文的块元素。</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <hr class="uk-article-divider">

                            <h3>图片与对象的对齐</h3>

                            <p>有间距地将图片与其他元素（比如文本）对齐。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>Class</th>
                                            <th>概述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.uk-align-left</code></td>
                                            <td>向左浮动元素，并创建右侧及底部的间距。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-align-right</code></td>
                                            <td>向右浮动元素，并创建左侧及底部的间距。</td>
                                        <tr>
                                            <td><code>.uk-align-medium-left</code></td>
                                            <td>仅影响宽度 <em>768px</em> 及以上的设备。</td>
                                        </tr>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-align-medium-right</code></td>
                                            <td>仅影响宽度 <em>768px</em> 及以上的设备。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-align-center</code></td>
                                            <td>居中对齐元素，并创建底部间距。</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <h4 class="tm-article-subtitle">示例</h4>

                                <p class="uk-clearfix"><img class="uk-align-medium-right" src="images/placeholder_400x200.svg" width="400" height="200" alt="Image aligned to the right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                            <h4 class="tm-article-subtitle">Code</h4>

<pre><code>&lt;p class="uk-clearfix"&gt;
    &lt;img class="uk-align-medium-right" src="" alt=""&gt;
    ...
&lt;/p&gt;</code></pre>

                            <hr class="uk-article-divider">

                          <h2 id="vertical-alignment"><a href="#vertical-alignment" class="uk-link-reset">垂直对齐</a></h2>

                            <p>将对象垂直对齐，你必须为需要对齐的对象创建一个父容器。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>Class</th>
                                            <th>概述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.uk-vertical-align</code></td>
                                            <td>向父容器添加这个类。这个容器需要被设定一个高度。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-vertical-align-middle</code></td>
                                            <td>向子元素添加这个类，使内容居中对齐。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-vertical-align-bottom</code></td>
                                            <td>向子元素添加这个类，使内容与底部对齐。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-height-1-1</code></td>
                                            <td>这个辅助类用来赋予100％的高度。</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <h3 class="tm-article-subtitle">示例</h3>


                            <div class="uk-grid" data-uk-grid-margin>
                                <div class="uk-width-medium-1-2">

                                    <div class="uk-vertical-align uk-panel uk-panel-box" style="height: 200px;">
                                        <div class="uk-vertical-align-middle uk-width-medium-1-2">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                        </div>
                                    </div>

                                </div>

                                <div class="uk-width-medium-1-2">

                                    <div class="uk-vertical-align uk-panel uk-panel-box" style="height: 200px;">
                                        <div class="uk-vertical-align-bottom uk-width-medium-1-2">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <h3 class="tm-article-subtitle">Code</h3>

                            <div class="uk-grid" data-uk-grid-margin>
                                <div class="uk-width-medium-1-2">

<pre><code>&lt;div class="uk-vertical-align"&gt;
    &lt;div class="uk-vertical-align-middle"&gt;
    ...
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

                                </div>
                                <div class="uk-width-medium-1-2">

<pre><code>&lt;div class="uk-vertical-align"&gt;
    &lt;div class="uk-vertical-align-bottom"&gt;
    ...
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

                                </div>
                            </div>

                            <p><span class="uk-badge">注意</span> 需要对齐的元素需要有一个宽度或最大宽度，它的宽度必须比父容器宽度小。</p>

                            <h3>居中整个页面</h3>

                            <p>如果你想将 <code>&lt;html&gt;</code> 和 <code>&lt;body&gt;</code> 元素扩展到整个页面的高度， <code>.uk-height-1-1</code> 类便派上了用场。创建错误页面时，这是非常有用的。</p>

                            <h4 class="tm-article-subtitle">Code</h4>

<pre><code>&lt;html class="uk-height-1-1"&gt;
    ...
    &lt;body class="uk-height-1-1"&gt;
        &lt;div class="uk-vertical-align"&gt;
            &lt;div class="uk-vertical-align-middle"&gt;...&lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3>水平居中</h3>

                            <p>水平居中你的网页内容，添加 <code>.uk-text-center</code> 类到父容器并添加 <code>.uk-container-center</code> 类到子元素。这是由于响应式特性而必须这样的。</p>

                            <hr class="uk-article-divider">

                          <h2 id="viewport-height"><a href="#viewport-height" class="uk-link-reset">视窗高度</a></h2>

                            <p>添加 <code>.uk-height-viewport</code> 类，就可以创建一个填充整个视窗高度的容器，例如用于全屏图像或视频。</p>

                            <hr class="uk-article-divider">

                            <h2 id="position-elements"><a href="#position-elements" class="uk-link-reset">元素的定位</a></h2>

                            <p>UIkit提供一系列的类去定位你的内容，而无须更改你自己的CSS。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-condensed uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th class="uk-width-1-4">Class</th>
                                            <th class="uk-width-3-4">Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.uk-position-top</code></td>
                                            <td>将元素绝对定位在顶部</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-position-top-left</code></td>
                                            <td>将元素绝对定位在左侧顶部</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-position-top-right</code></td>
                                            <td>将元素绝对定位在右侧顶部</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-position-bottom</code></td>
                                            <td>将元素绝对定位在底部</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-position-bottom-left</code></td>
                                            <td>将元素绝对定位在左侧底部</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-position-bottom-right</code></td>
                                            <td>将元素绝对定位在右侧底部</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-position-cover</code></td>
                                            <td>为元素添加绝对定位，并将其扩展覆盖其父元素</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-position-relative</code></td>
                                            <td>为元素添加relative定位方法</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-position-z-index</code></td>
                                            <td>为元素添加数值为1的 <em>z-index</em> 属性</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <hr class="uk-article-divider">

                            <h2 id="responsive-objects"><a href="#responsive-objects" class="uk-link-reset">响应式对象</a></h2>

                            <p>在UIkit中，图片会默认地自适应它的父容器。如果你想将响应式特性应用于媒体元素，比如视频对象，只需要添加下面的类中的一个。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-condensed uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th class="uk-width-1-4">Class</th>
                                            <th class="uk-width-3-4">描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.uk-responsive-width</code></td>
                                            <td>根据父容器的宽度调整对象的宽度，保持对象原始的宽高比。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-responsive-height</code></td>
                                            <td>根据父容器的高度调整对象的高度，保持对象原始的宽高比。</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <p><span class="uk-badge">NOTE</span> 同样，可以添加 <code>.uk-responsive-width</code> 类名到 iframe ，此iframe需要有预设的width和height属性。</p>

                            <h3 class="tm-article-subtitle">Example 宽度</h3>

                            <p>
                                <video controls class="uk-responsive-width" width="600" height="350">
                                    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4?test1" type="video/mp4">
                                        <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv?test1" type="video/ogg">
                                </video>
                            </p>

                            <h3 class="tm-article-subtitle">Example 高度</h3>

                            <p style="height: 100px;"><img class="uk-responsive-height" src="images/placeholder_400x200.svg" width="400" height="200"></p>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;video controls class="uk-responsive-width"&gt;&lt;/video&gt;

&lt;img class="uk-responsive-height" src="" alt=""&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="inline-svg"><a href="#inline-svg" class="uk-link-reset">行内的 SVG</a></h2>

                            <p>SVG 或可缩放的矢量图形真的很棒，比如作为LOGO使用时，无论是缩放还是用于动画，它都很清晰。要使用 CSS 来控制 SVG，只需要为图片标签添加 <code>data-uk-svg</code> 属性。这可以将 SVG 转变行内元素，并具有所有属性，包括 ID、class、width、height 等等，你可以通过 CSS 方便地控制它。</p>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;img src="my-image.svg" data-uk-svg&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="margin"><a href="#margin" class="uk-link-reset">外边距 Margin</a></h2>

                            <p>添加一个下面的类为块元素添加外边距。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-condensed uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th class="uk-width-1-4">Class</th>
                                            <th class="uk-width-3-4">描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.uk-margin</code></td>
                                            <td>为一个段落添加相同的顶部和底部外边距。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-margin-top</code></td>
                                            <td>添加顶部外边距。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-margin-bottom</code></td>
                                            <td>添加底部外边距。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-margin-left</code></td>
                                            <td>添加左侧外边距。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-margin-right</code></td>
                                            <td>添加右侧外边距。</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <hr class="uk-article-divider">

                            <h3>较大的外边距</h3>

                            <p>使用一个下面的类来为块元素添加较大的外边距。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-condensed uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th class="uk-width-1-4">Class</th>
                                            <th class="uk-width-3-4">描述Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.uk-margin-large</code></td>
                                            <td>为一个段落添加较大的顶部和底部外边距。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-margin-large-top</code></td>
                                            <td>添加较大的顶部外边距。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-margin-large-bottom</code></td>
                                            <td>添加较大的底部外边距。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-margin-large-left</code></td>
                                            <td>添加较大的左侧外边距。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-margin-large-right</code></td>
                                            <td>添加较大的右侧外边距。</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <hr class="uk-article-divider">

                            <h3>较小的外边距</h3>

                            <p>使用一个下面的类来为块元素添加较小的外边距。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-condensed uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th class="uk-width-1-4">Class</th>
                                            <th class="uk-width-3-4">描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.uk-margin-small</code></td>
                                            <td>为一个段落添加较小的顶部和底部外边距。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-margin-small-top</code></td>
                                            <td>添加较小的顶部外边距。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-margin-small-bottom</code></td>
                                            <td>添加较小的底部外边距。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-margin-small-left</code></td>
                                            <td>添加较小的左侧外边距。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-margin-small-right</code></td>
                                            <td>添加较小的右侧外边距。</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <hr class="uk-article-divider">

                            <h3>移除外边距</h3>

                            <p>添加一个下面的类来移除块元素的外边距。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-condensed">
                                    <thead>
                                        <tr>
                                            <th class="uk-width-1-4">Class</th>
                                            <th class="uk-width-3-4">描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.uk-margin-remove</code></td>
                                            <td>移除全部外边距。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-margin-top-remove</code></td>
                                            <td>移除顶部外边距。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-margin-bottom-remove</code></td>
                                            <td>移除底部外边距。</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <hr class="uk-article-divider">

                            <h2 id="auto-margin"><a href="#auto-margin" class="uk-link-reset">自动外边距Auto margin</a></h2>

                            <p>为堆叠的多个元素间距，例如，在较小的视口中堆叠显示多个并列的内联元素时，只需要添加 <code>data-uk-margin</code> 属性到它们的父元素，即可自动为子元素添加 the <code>.uk-margin-small-top</code> 。</p>

                            <h3 class="tm-article-subtitle">示例</h3>

                            <p class="uk-width-1-2" data-uk-margin>
                                <button class="uk-button">Button</button>
                                <button class="uk-button">Button</button>
                                <button class="uk-button">Button</button>
                                <button class="uk-button">Button</button>
                                <button class="uk-button">Button</button>
                                <button class="uk-button">Button</button>
                                <button class="uk-button">Button</button>
                                <button class="uk-button">Button</button>
                                <button class="uk-button">Button</button>
                                <button class="uk-button">Button</button>
                            </p>

                            <h3 class="tm-article-subtitle">Code</h3>

<pre><code>&lt;p data-uk-margin&gt;
    &lt;button class="uk-button"&gt;...&lt;/button&gt;
    &lt;button class="uk-button"&gt;...&lt;/button&gt;
&lt;/p&gt;</code></pre>

                            <p><span class="uk-badge">注意</span> 默认情况下，data属性为堆叠的元素添加 <code>.uk-margin-small-top</code> 类。如果需要添加更大的margin，只需要添加 <code>{cls:'.uk-margin-top'}</code> 选项就行。</p>

                            <hr class="uk-article-divider">

                            <h2 id="padding"><a href="#padding" class="uk-link-reset">Padding</a></h2>

                            <p>移除块元素内的 padding ，添加以下类中的一个就行了。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-condensed">
                                    <thead>
                                        <tr>
                                            <th class="uk-width-1-4">Class</th>
                                            <th class="uk-width-3-4">描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.uk-padding-remove</code></td>
                                            <td>移除所有padding.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-padding-top-remove</code></td>
                                            <td>移除顶部padding.</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-padding-bottom-remove</code></td>
                                            <td>移除底部padding</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-padding-vertical-remove</code></td>
                                            <td>移除顶部和底部padding.</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <hr class="uk-article-divider">

                            <h2 id="border-radius"><a href="#border-radius" class="uk-link-reset">Border 半径</a></h2>

                            <p>要为元素添加圆角，添加 <code>.uk-border-rounded</code>即可。要使用圆形，添加 <code>.uk-border-circle</code> 即可。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <p>
                                <img class="uk-border-rounded" src="images/placeholder_200x200.svg" width="200" height="200" alt="Border rounded">
                                <img class="uk-border-circle" src="images/placeholder_200x200.svg" width="200" height="200" alt="Border circle">
                            </p>

<pre><code>&lt;img class="uk-border-rounded" src="" alt=""&gt;
&lt;img class="uk-border-circle" src="" alt=""&gt;
</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="heading-large"><a href="#heading-large" class="uk-link-reset">标题变大</a></h2>

                            <p>为了增大平板电脑和台式机下标题字体的大小，只需添加 <code>.uk-heading-large</code> 类。</p>

                            <h3 class="tm-article-subtitle">示例 </h3>

                            <h1 class="uk-heading-large">Heading</h1>

                            <h3 class="tm-article-subtitle">Code</h3>

<pre><code>&lt;h1 class="uk-heading-large"&gt;...&lt;h1&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="link-muted"><a href="#link-muted" class="uk-link-reset">哑色链接</a></h2>

                            <p>如果要去掉链接的默认颜色，只需添加 <code>.uk-link-muted</code> 类到锚元素或它的父元素。</p>

                            <h3 class="tm-article-subtitle">示例 </h3>

                            <h2 class="uk-link-muted"><a href="">Heading</a></h2>

                            <ul class="uk-list uk-width-medium-1-4 uk-link-muted">
                                <li><a href="">Link</a></li>
                                <li><a href="">Link</a></li>
                                <li><a href="">Link</a></li>
                            </ul>

                            <h3 class="tm-article-subtitle">Code</h3>

<pre><code>&lt;a class="uk-link-muted"&gt;...&lt;a&gt;

&lt;h1 class="uk-link-muted"&gt;&lt;a&gt;...&lt;a&gt;&lt;h1&gt;

&lt;ul class="uk-link-muted"&gt;
    &lt;li&gt;&lt;a&gt;...&lt;a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a&gt;...&lt;a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a&gt;...&lt;a&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="scrollable-preformatted-text"><a href="#scrollable-preformatted-text" class="uk-link-reset">可滚动的预格式化文本</a></h2>

                             <p>添加 <code>.uk-scrollable-text</code> 类设置一个最大高度，并提供一个垂直滚动条。这对预格式化的文本是非常有用的，它可以让你的代码块节省更多的空间。</p>

                             <h3 class="tm-article-subtitle">示例 </h3>

<pre class="uk-scrollable-text"><code>&lt;!-- This is sample code to demonstrate preformatted text with a scrollbar. --&gt;

&lt;div class="uk-grid"&gt;
    &lt;div class="uk-width-medium-1-2"&gt;
        &lt;div class="uk-panel uk-panel-box uk-text-left"&gt;...&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="uk-width-medium-1-2"&gt;
        &lt;div class="uk-panel uk-panel-box uk-text-right"&gt;...&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="uk-grid"&gt;
    &lt;div class="uk-width-medium-1-2"&gt;
        &lt;div class="uk-panel uk-panel-box uk-text-center"&gt;...&lt;/div&gt;
    &lt;/div>
    &lt;div class="uk-width-medium-1-2"&gt;
        &lt;div class="uk-panel uk-panel-box uk-text-justify"&gt;...&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="uk-grid"&gt;
    &lt;div class="uk-width-medium-1-2"&gt;
        &lt;div class="uk-panel uk-panel-box uk-text-break"&gt;...&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="uk-width-medium-1-2"&gt;
        &lt;div class="uk-panel uk-panel-box"&gt;&lt;p class="uk-margin-remove uk-text-truncate"&gt;...&lt;/p&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                          <h2 id="scrollable-box"><a href="#scrollable-box" class="uk-link-reset">可滚动的盒子</a></h2>

                            <p>添加 <code>.uk-scrollable-box</code> 类创建一个具有最大高度及垂直滚动条的看起来像面板的盒子。它可以包含任何类型的内容。</p>

                            <h3 class="tm-article-subtitle">示例</h3>

                            <div class="uk-scrollable-box uk-width-medium-1-3">
                                <ul class="uk-list">
                                    <li><label><input type="checkbox"> Category 1</label></li>
                                    <li>
                                        <label><input type="checkbox"> Category 2</label>
                                        <ul>
                                            <li><label><input type="checkbox"> Category 2.1</label></li>
                                            <li><label><input type="checkbox"> Category 2.2</label></li>
                                            <li>
                                                <label><input type="checkbox"> Category 2.3</label>
                                                <ul>
                                                    <li><label><input type="checkbox"> Category 2.3.1</label></li>
                                                    <li><label><input type="checkbox"> Category 2.3.2</label></li>
                                                </ul>
                                            </li>
                                            <li><label><input type="checkbox"> Category 2.4</label></li>
                                        </ul>
                                    </li>
                                    <li><label><input type="checkbox"> Category 3</label></li>
                                    <li><label><input type="checkbox"> Category 4</label></li>
                                </ul>
                            </div>

                            <h4 class="tm-article-subtitle">Code</h4>

<pre><code>&lt;div class="uk-scrollable-box"&gt;
    &lt;ul class="uk-list"&gt;
        &lt;li&gt;&lt;label&gt;&lt;input type="checkbox"&gt;...&lt;/label&gt;&lt;/li&gt;
        &lt;li&gt;&lt;label&gt;&lt;input type="checkbox"&gt;...&lt;/label&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="overflow-container"><a href="#overflow-container" class="uk-link-reset">溢出容器/Overflow container</a></h2>

                            <p>当容器内部的元素宽度超过了容器本身，只需要为容器的 <code>&lt;div&gt;</code> 元素添加一个 <code>.uk-overflow-container</code> 类，就能为容器带来一个水平方向的滚动条。 在响应式网页中处理表格时很有用，因为表格可能在某些断点会显得过于宽大。</p>

                            <h3 class="tm-article-subtitle">示例</h3>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-striped uk-table-condensed uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>Table Heading</th>
                                            <th>Table Heading</th>
                                            <th>Table Heading</th>
                                            <th>Table Heading</th>
                                            <th>Table Heading</th>
                                            <th>Table Heading</th>
                                            <th>Table Heading</th>
                                            <th>Table Heading</th>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr>
                                            <td>Table Footer</td>
                                            <td>Table Footer</td>
                                            <td>Table Footer</td>
                                            <td>Table Footer</td>
                                            <td>Table Footer</td>
                                            <td>Table Footer</td>
                                            <td>Table Footer</td>
                                            <td>Table Footer</td>
                                        </tr>
                                    </tfoot>
                                    <tbody>
                                        <tr>
                                            <td>Table Data</td>
                                            <td>Table Data</td>
                                            <td>Table Data</td>
                                            <td>Table Data</td>
                                            <td>Table Data</td>
                                            <td>Table Data</td>
                                            <td>Table Data</td>
                                            <td>Table Data</td>
                                        </tr>
                                        <tr>
                                            <td>Table Data</td>
                                            <td>Table Data</td>
                                            <td>Table Data</td>
                                            <td>Table Data</td>
                                            <td>Table Data</td>
                                            <td>Table Data</td>
                                            <td>Table Data</td>
                                            <td>Table Data</td>
                                        </tr>
                                        <tr>
                                            <td>Table Data</td>
                                            <td>Table Data</td>
                                            <td>Table Data</td>
                                            <td>Table Data</td>
                                            <td>Table Data</td>
                                            <td>Table Data</td>
                                            <td>Table Data</td>
                                            <td>Table Data</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <h4 class="tm-article-subtitle">Code</h4>

<pre><code>&lt;div class="uk-overflow-container"&gt;...&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                          <h2 id="display-utilities"><a href="#display-utilities" class="uk-link-reset">显示效果 </a></h2>

                            <p>添加这些类中的一个改变元素的 display 属性。 </p>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-condensed uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th class="uk-width-1-4">Class</th>
                                            <th class="uk-width-3-4">描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.uk-display-block</code></td>
                                            <td>强制将元素改变成块元素。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-display-inline</code></td>
                                            <td>强制将元素改变成内联元素。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-display-inline-block</code></td>
                                            <td>强制将元素改变成内联块元素。</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <hr class="uk-article-divider">

                            <h2 id="visibility-utilities"><a href="#visibility-utilities" class="uk-link-reset">可见性效果</a></h2>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-condensed">
                                    <thead>
                                        <tr>
                                            <th class="uk-width-1-4">Class</th>
                                            <th class="uk-width-3-4">描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.uk-hidden</code></td>
                                            <td>在所有设备上隐藏该元素。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-hidden-touch</code></td>
                                            <td>在触控设备上隐藏</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-hidden-notouch</code></td>
                                            <td>在非触控设备上隐藏</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-invisible</code></td>
                                            <td>隐藏该元素，但是不在流量上删除该元素。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-visible-hover</code></td>
                                            <td>悬停时通过 <code>display: block</code>来显示隐藏的内容。将这个类添加到父元素中。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-visible-hover-inline</code></td>
                                            <td>悬停时通过 <code>display: inline-block</code> 来显示隐藏的内容。将这个类添加到父元素中。</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <h4 class="tm-article-subtitle">Example</h4>

                            <div class="uk-visible-hover-inline uk-margin">来，悬停我... <div class="uk-hidden">巴嘎!</div></div>

                            <h4 class="tm-article-subtitle">Markup</h4>

<pre><code>&lt;div class="uk-visible-hover"&gt;
    &lt;div class="uk-hidden"&gt;...&lt;/div&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3>响应式可见性</h3>

                            <p>你可以在特定的视口宽度下对内容进行显示或隐藏。通过设置断点变量可以很容易的进行修改。由于不同设备的尺寸变得越来越模糊，所以类的名称保持通用性而不提及任何具体的设备名称。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-line uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th class="uk-width-1-4">Class</th>
                                            <th class="uk-width-1-4">Small<br>
                                              <small>(手机)</small><br><small style="font-weight: normal;">最大 767</small></th>
                                            <th class="uk-width-1-4">Medium<br>
                                              <small>(平板)</small><br><small style="font-weight: normal;">768 到 959</small></th>
                                            <th class="uk-width-1-4">Large<br>
                                              <small>(PC)</small><br><small style="font-weight: normal;">960 以上</small></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.uk-visible-small</code></td>
                                            <td class="uk-text-success">可见Visible</td>
                                            <td class="uk-text-muted">隐藏Hidden</td>
                                            <td class="uk-text-muted">隐藏Hidden</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-visible-medium</code></td>
                                            <td class="uk-text-muted">隐藏Hidden</td>
                                            <td class="uk-text-success">可见Visible</td>
                                            <td class="uk-text-muted">隐藏Hidden</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-visible-large</code></td>
                                            <td class="uk-text-muted">隐藏Hidden</td>
                                            <td class="uk-text-muted">隐藏Hidden</td>
                                            <td class="uk-text-success">可见Visible</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-hidden-small</code></td>
                                            <td class="uk-text-muted">隐藏Hidden</td>
                                            <td class="uk-text-success">可见Visible</td>
                                            <td class="uk-text-success">可见Visible</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-hidden-medium</code></td>
                                            <td class="uk-text-success">可见Visible</td>
                                            <td class="uk-text-muted">隐藏Hidden</td>
                                            <td class="uk-text-success">可见Visible</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-hidden-large</code></td>
                                            <td class="uk-text-success">可见Visible</td>
                                            <td class="uk-text-success">可见Visible</td>
                                            <td class="uk-text-muted">隐藏Hidden</td>
                                        </tr>
                                    </tbody>
                              </table>
                          </div>

                        </article>

                    </div>
                </div>

            </div>
        </div>

        <div class="tm-footer">
            <div class="uk-container uk-container-center uk-text-center">

                <ul class="uk-subnav uk-subnav-line uk-flex-center">
                    <li><a href="http://github.com/uikit/uikit">GitHub</a></li>
                    <li><a href="http://github.com/uikit/uikit/issues">Issues</a></li>
                    <li><a href="http://github.com/uikit/uikit/blob/master/CHANGELOG.md">Changelog</a></li>
                    <li><a href="https://twitter.com/getuikit">Twitter</a></li>
                </ul>

                <div class="uk-panel">
                    <p>Made by <a href="http://www.yootheme.com">YOOtheme</a> with love and caffeine.<br>Licensed under <a href="http://opensource.org/licenses/MIT">MIT license</a>.</p>
                    <a href="../index.html"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>
                </div>

            </div>
        </div>

        <div id="tm-offcanvas" class="uk-offcanvas">

            <div class="uk-offcanvas-bar">

                <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav="{multiple:true}">
                    <li class="uk-parent"><a href="#">UIkit 中文文档</a>
                        <ul class="uk-nav-sub">
                            <li><a href="documentation_get-started.html">开始使用</a></li>
                            <li><a href="documentation_how-to-customize.html">如何定制</a></li>
                            <li><a href="documentation_layouts.html">布局示例</a></li>
                            <li><a href="core.html">核心组件</a></li>
                            <li><a href="components.html">附加组件</a></li>
                            <li><a href="documentation_project-structure.html">项目结构</a></li>
                            <li><a href="documentation_less-sass.html">Less &amp; Sass 文件</a></li>
                            <li><a href="documentation_create-a-theme.html">创建主题</a></li>
                            <li><a href="documentation_create-a-style.html">创建样式</a></li>
                            <li><a href="documentation_customizer-json.html">Customizer.json</a></li>
                            <li><a href="documentation_javascript.html">JavaScript</a></li>
                            <li><a href="documentation_custom-prefix.html">自定义前缀</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">Core</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-wrench"></i> 默认</a>
                        <ul class="uk-nav-sub">
                            <li><a href="base.html">基础</a></li>
                            <li><a href="print.html">打印</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> 布局类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid.html">网格</a></li>
                            <li><a href="panel.html">面板</a></li>
                            <li><a href="block.html">块</a></li>
                            <li><a href="article.html">文章</a></li>
                            <li><a href="comment.html">评论</a></li>
                            <li><a href="utility.html">效果</a></li>
                            <li><a href="flex.html">Flex</a></li>
                            <li><a href="cover.html">覆盖</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> 导航类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="nav.html">导航菜单</a></li>
                            <li><a href="navbar.html">导航栏</a></li>
                            <li><a href="subnav.html">二级导航</a></li>
                            <li><a href="breadcrumb.html">面包屑</a></li>
                            <li><a href="pagination.html">分页</a></li>
                            <li><a href="tab.html">选项卡</a></li>
                            <li><a href="thumbnav.html">缩略图导航</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-check"></i> 页面元素</a>
                        <ul class="uk-nav-sub">
                            <li><a href="list.html">列表</a></li>
                            <li><a href="description-list.html">描述列表</a></li>
                            <li><a href="table.html">表格</a></li>
                            <li><a href="form.html">表单</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> 常用组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="button.html">按钮</a></li>
                            <li><a href="icon.html">图标</a></li>
                            <li><a href="close.html">关闭</a></li>
                            <li><a href="badge.html">徽章</a></li>
                            <li><a href="alert.html">提示框</a></li>
                            <li><a href="thumbnail.html">缩略图</a></li>
                            <li><a href="overlay.html">遮罩</a></li>
                            <li><a href="text.html">文本</a></li>
                            <li><a href="column.html">列</a></li>
                            <li><a href="animation.html">动画</a></li>
                            <li><a href="contrast.html">对比度</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dropdown.html">下拉菜单</a></li>
                            <li><a href="modal.html">模态对话框</a></li>
                            <li><a href="offcanvas.html">抽屉</a></li>
                            <li><a href="switcher.html">切换器</a></li>
                            <li><a href="toggle.html">拨动</a></li>
                            <li><a href="scrollspy.html">滚动监听</a></li>
                            <li><a href="smooth-scroll.html">平滑滚动</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">附加组件</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> 布局类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid-js.html">动态网格</a></li>
                            <li><a href="grid-parallax.html">视差网格</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> 导航类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dotnav.html">圆点导航</a></li>
                            <li><a href="slidenav.html">滑动导航</a></li>
                            <li><a href="pagination-js.html">动态分页</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> 常用组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="form-advanced.html">高级表单</a></li>
                            <li><a href="form-file.html">文件表单</a></li>
                            <li><a href="form-password.html">密码表单</a></li>
                            <li><a href="form-select.html">选择表单</a></li>
                            <li><a href="placeholder.html">占位符</a></li>
                            <li><a href="progress.html">进度条</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="lightbox.html">灯箱</a></li>
                            <li><a href="autocomplete.html">自动完成</a></li>
                            <li><a href="datepicker.html">日期选择器</a></li>
                            <li><a href="htmleditor.html">HTML 编辑器</a></li>
                            <li><a href="slider.html">滚动条</a></li>
                            <li><a href="slideset.html">滑块集</a></li>
                            <li><a href="slideshow.html">幻灯片</a></li>
                            <li><a href="parallax.html">视差</a></li>
                            <li><a href="accordion.html">手风琴</a></li>
                            <li><a href="notify.html">通知</a></li>
                            <li><a href="search.html">搜索</a></li>
                            <li><a href="nestable.html">可嵌套</a></li>
                            <li><a href="sortable.html">可排序</a></li>
                            <li><a href="sticky.html">附着</a></li>
                            <li><a href="timepicker.html">时间选择器</a></li>
                            <li><a href="tooltip.html">工具提示</a></li>
                            <li><a href="upload.html">上传</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-divider"></li>
                    <li><a href="../showcase/index.html">案例展示</a></li>
                    <li><a href="tutorials.html">视频教程</a></li>
                </ul>

            </div>

        </div>

    </body>
</html>
